<template>
  <!--积分商城页面-->
  <div>
    <div class="search">
      <input type="text" placeholder="商品名称/关键字" v-model="goodsName">
      <img src="../../../assets/search.png" alt="" width="16" @click="goSearch(goodsName)">
    </div>
    <ul class="tuijianlist">
      <li v-for="item in goodsList" @click="goGoodsDetail(item.goodsId,item.categoryCode)">
        <img :src="item.coverImg | imgPathFilter" alt="" width="100%" height="170px" style="object-fit:cover">
        <div>
          <p>{{item.goodsName}}</p>
          <p>{{item.integralValue}}积分</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {userIntegralExchange} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'integralgoods',
    props: {},
    data() {
      return {
        goodsList: [],
        goodsName: ''
      };
    },
    methods: {
      getGoodsListData(params){
        var that = this;
        userIntegralExchange(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.goodsList = res.object;
          } else {
            Toast.fail(res.info);
          }
        })
      },
      goSearch(goodsName){
        this.getGoodsListData({goodsName: goodsName});
      },
      goGoodsDetail(goodsId, categoryCode){
        if (categoryCode == 'vipcard_2' || categoryCode == 'vipcard_1') {
          this.$router.push({path: 'jinkadetail', query: {goodsId: goodsId,entrySource:'integralshop'}});
          return;
        }
        if (categoryCode == 'viproom') {
          this.$router.push({path: 'guibindetail', query: {goodsId: goodsId, entrySource:'integralshop'}});
          return;
        }
        if (categoryCode == 'viponly') {
          this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId, entrySource:'integralshop'}});
          return;
        }
        if (categoryCode == 'coupons') {
          this.$router.push({path: 'youhuiquan', query: {goodsId: goodsId,entrySource:'integralshop'}});
          return;
        }
        if (categoryCode == 'insurance') {
          this.$router.push({path: 'baozhangdetail', query: {goodsId: goodsId,entrySource:'integralshop'}});
          return;
        }
        this.$router.push({path: 'goodsdetail', query: {goodsId: goodsId,entrySource:'integralshop'}})
      }
    },
    created() {
        this.getGoodsListData();
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
  }

  .search {
    position: relative;
    width: 95%;
    margin: 10px auto;
    input {
      width: 90%;
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 16px;
      color: #111;
    }

    img {
      position: absolute;
      right: 20px;
      top: 27px;
    }
  }

  .tuijianlist {
    text-align: left;
    padding: 10px 0 10px 10px;
    margin-bottom: 50px;
    li {
      display: inline-block;
      width: calc(50% - 13px);
      font-size: 0;
      margin-bottom: 13px;
      margin-right: 10px;
      div {
        border: 1px solid #eee;
        border-top: none;
        box-shadow: 0px 5px 15px -9px rgba(0, 0, 0, 0.5);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-align: left;
        padding: 10px;
        p:first-child {
          font-size: 15px;
          color: #333;
        }
        p:last-child {
          font-size: 17px;
          color: #ff7f00;
        }
      }

    }
  }
</style>
